<template>
  <div class="flex fs14 mgl20 pe">
    <div v-for="(i, num) in scList" @click="ck(num)">
      <span class="mgr20 flex aic" :class="active == num ? 'cgreen' : ''">
        <p class="tax van-ellipsis">{{ i.name }}</p>
        <i v-if="active == num"><van-icon name="arrow-up" /></i>
        <i v-else><van-icon name="arrow-down" /></i>
      </span>
    </div>
    <div class="screenCard" v-if="show">
      <div
        v-for="(j, index) in list[active].list"
        class="cell"
        @click="chk(index)"
      >
        <span class="van-ellipsis tax">{{ j }}</span>
        <span v-if="check == index"
          ><van-icon name="success" class="cgreen"
        /></span>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.pe {
  position: relative;
  width: 360px;
}
.screenCard {
  border: 2px solid #d6c8c865;
  border-radius: 5px;
  width: 320px;
  position: absolute;
  height: 120px;
  background-color: #fff;
  z-index: 100;
  bottom: -120px;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: scroll;
}
.cell {
  margin-top: 8px;
  height: 30px;
  border-bottom: 1px solid #d6c8c865;
  display: flex;
  justify-content: space-between;
}
.cell:last-child {
  border-bottom: none;
}
.cgreen {
  color: rgb(27, 223, 27);
}
.tax {
  display: flex;
  max-width: 60px;
}
@media (min-width: 500px) {
}
</style>
<script>
module.exports = {
  data() {
    return {
      scList: [],
      active: -1,
      check: -1,
      show: false,
    };
  },
  props: {
    list: { type: Array },
  },
  created() {
    this.scList = this.list;
  },
  //   watch: {
  //     show(val) {
  //       if (val) {
  //         setTimeout(() => {
  //           document.body.addEventListener(
  //             "click",
  //             (index) => {
  //               this.chk(index);
  //             },
  //             1000
  //           );
  //         });
  //       } else {
  //         document.body.removeEventListener("click", () => {});
  //       }
  //     },
  //   },
  methods: {
    ck(num) {
      if (!this.show) {
        this.show = true;
        this.active = num;
      } else {
        this.show = false;
        this.active = -1;
      }
    },
    chk(index) {
      this.check = index;
      this.scList[this.active].name = this.scList[this.active].list[this.check];
      this.show = false;
      this.active = -1;
      this.check = -1;
    },
    handleBlur(event) {
      this.show = false;
    },
  },
};
</script>
